<template>
<h1>
    HelloWorld
</h1>
<h1>当前计数：<span>{{ numa }}{{ numb }}</span></h1>
<h1>c：<span>{{ numObj.c }}</span></h1>
<h1>d：<span>{{ numObj.d }}</span></h1>
<h1>e：<span>{{ numObj.e.ee }}</span></h1>


<button @click="num++">加1</button>
<button @click="num2++">加1</button>
<button @click="numObj.c++">c+</button>
<button @click="numObj.d++">d+</button>
<button @click="numObj.e.ee++">e+</button>





</template>

<script>
// computed 增加了get和set

import { ref,watch,reactive, watchEffect} from 'vue';
export default {
    setup(){
        // 监听ref定义的数据
        let numa = ref(1)
        let numb = ref(1)
        watch([numa,numb],(newValue,oldValue)=>{
            // console.log('num变化了',newValue,oldValue)
        },{immediate:true,deep:true})

        // 监听reactive定义的数据
        let numObj = reactive({
             c:1,
             d:2,
             e:{
                ee:'3'
             }

        })
        watch(()=>numObj.c,(newValue,oldValue)=>{
            console.log('c',newValue)
        },)

        // 监听对象中的基本类型属性
        // watch([numObj.c,numObj.d],(newValue,oldValue)=>{
        //     // console.log('c、d',newValue,oldValue)
        // },)
      // 监听对象中的对象属性类型
       watch(()=>numObj.e,(newValue,oldValue)=>{
        let newVal = reactive(newValue)
        // console.log(newVal.ee,'newVal')
        //     console.log('e',newValue,oldValue)
        },)
      //初始化执行一次 不可关闭  watchEffect自动监听使用到的属性 watch手动添加定向的监听属性
        watchEffect(()=>{
            // let a = num.value
            // let b = num2.value
            console.log('watcheffect函数执行了')
        })
        return{
            numa,
            numb,
            numObj
        }
    }
}
</script>

<style>
span{
    color: red;
}

</style>